<template>
  <div class="overview-container">
    <!-- <div class="page-header">
      <div class="page-actions">
        <el-button type="primary" @click="refreshData" :loading="loading">
          <el-icon><Refresh /></el-icon> <span class="ml-4">刷新</span>
        </el-button>
      </div>
    </div> -->

    <!-- 状态卡片和剩余机时容器 -->
    <div class="status-and-hours-container">
      <!-- 训练任务状态卡片 -->
      <div class="status-cards">
        <el-card class="resource-card" >
          <div class="card-header">
            <i
              class="icon iconfont icon-yonghu"
              style="font-size: 20px; color: #409eff; margin-right: 8px"
            >
            </i>
            <div class="card-title">用户</div>
          </div>
          <div class="stat-grid" style="   grid-template-columns: repeat(5, 1fr);">
            <div
              class="stat-item cursor-pointer"
              @click="handleImageManagement('user')"
            >
              <div class="stat-value">
                {{ formatNumber(indexData.user.count_all_user) }}

              </div>
              <div class="stat-label">总数</div>
            </div>
            <div
              class="stat-item cursor-pointer"
              @click="handleImageManagement('share')"
            >
              <div class="stat-value">
                  {{ formatNumber(indexData.user.count_today_user) }}
              </div>
              <div class="stat-label">今日</div>
            </div>
            <div
              class="stat-item cursor-pointer"
              @click="handleImageManagement('preset')"
            >
              <div class="stat-value">
                  {{ formatNumber(indexData.user.count_yesterday_user) }}
              </div>
              <div class="stat-label">昨日  </div>
            </div>
            <div
              class="stat-item cursor-pointer"
              @click="handleImageManagement('preset')"
            >
              <div class="stat-value">
                  {{ formatNumber(indexData.user.count_month_user) }}
              </div>
              <div class="stat-label">本月  </div>
            </div>
            <div
              class="stat-item cursor-pointer"
              @click="handleImageManagement('preset')"
            >
              <div class="stat-value">
                 {{ formatNumber(indexData.user.count_last_month_user) }}
              </div>
              <div class="stat-label">上月  </div>
            </div>
          </div>
        </el-card>
       <el-card class="resource-card" >
          <div class="card-header">
            <i
              class="icon iconfont icon-yonghu"
              style="font-size: 20px; color: #409eff; margin-right: 8px"
            >
            </i>
            <div class="card-title">销售额  </div>
          </div>
          <div class="stat-grid" style="   grid-template-columns: repeat(5, 1fr);">
            <div
              class="stat-item cursor-pointer"
              @click="handleImageManagement('user')"
            >
              <div class="stat-value">
                {{ formatNumber(indexData.pay.count_all_income) }}

              </div>
              <div class="stat-label">总数</div>
            </div>
            <div
              class="stat-item cursor-pointer"
              @click="handleImageManagement('share')"
            >
              <div class="stat-value">
                 {{ formatNumber(indexData.pay.count_today_income) }}
              </div>
              <div class="stat-label">今日</div>
            </div>
            <div
              class="stat-item cursor-pointer"
              @click="handleImageManagement('preset')"
            >
              <div class="stat-value">
                 {{ formatNumber(indexData.pay.count_yesterday_income) }}
              </div>
              <div class="stat-label">昨日  </div>
            </div>
            <div
              class="stat-item cursor-pointer"
              @click="handleImageManagement('preset')"
            >
              <div class="stat-value">
                 {{ formatNumber(indexData.pay.count_month_income) }}
              </div>
              <div class="stat-label">本月  </div>
            </div>
            <div
              class="stat-item cursor-pointer"
              @click="handleImageManagement('preset')"
            >
              <div class="stat-value">
                 {{ formatNumber(indexData.pay.count_last_month_income) }}
              </div>
              <div class="stat-label">上月  </div>
            </div>
          </div>
        </el-card>
        <el-card class="resource-card">
          <div class="card-header">
            <i
              class="icon iconfont icon-dingdan"
              style="font-size: 20px; color: #409eff; margin-right: 8px"
            >
            </i>
            <div class="card-title">包裹</div>
          </div>
          <div class="stat-grid">
            <div
              class="stat-item cursor-pointer"
              @click="handleImageManagement('user')"
            >
              <div class="stat-value">{{ indexData.order.count_volume }}</div>
              <div class="stat-label">今日体积<span>m³</span></div>
            </div>
            <div
              class="stat-item cursor-pointer"
              @click="handleImageManagement('share')"
            >
              <div class="stat-value">{{ indexData.order.count_weight }}</div>
              <div class="stat-label">今日重量<span>kg</span></div>
            </div>
            <div
              class="stat-item cursor-pointer"
              @click="handleImageManagement('preset')"
            >
              <div class="stat-value">{{ indexData.order.count_piece }}</div>
              <div class="stat-label">今日件数<span>件</span></div>
            </div>
          </div>
        </el-card>
        <el-card class="resource-card">
        <div class="card-header">
          <i
            class="icon iconfont icon-zhifu"
            style="font-size: 20px; color: #409eff; margin-right: 8px"
          >
          </i>
          <div class="card-title">支付</div>
        </div>
        <div class="stat-grid">
          <div
            class="stat-item cursor-pointer"
            @click="handleImageManagement('user')"
          >
            <div class="stat-value">{{ indexData.pay.pay_count_success }}</div>
            <div class="stat-label">已支付</div>
          </div>
          <div
            class="stat-item cursor-pointer"
            @click="handleImageManagement('share')"
          >
            <div class="stat-value">{{ indexData.pay.pay_count_wait }}</div>
            <div class="stat-label">待支付</div>
          </div>
          <div
            class="stat-item cursor-pointer"
            @click="handleImageManagement('preset')"
          >
            <div class="stat-value">{{ indexData.pay.pay_count_appr }}</div>
            <div class="stat-label">待审核</div>
          </div>
        </div>
      </el-card>
    
      </div>

      <!-- 剩余机时 -->
      <div class="remaining-hours">
        <el-card>
          <div class="card-header">
            <div class="card-title">总收入</div>
          </div>
          <div class="hours-content">
            <div class="circle-container">
              <el-progress
                type="circle"
                :percentage="
                  indexData.pay.count_all_income
                    ? (
                        ((indexData.pay.count_all_income -
                          indexData.pay.count_all_cost) /
                          indexData.pay.count_all_income) *
                        100
                      ).toFixed(2)
                    : 0
                "
                :stroke-width="10"
                :width="180"
              >
                <div class="progress-inner">
                  <div class="hours-value">
                    {{ formatNumber(indexData.pay.count_all_income) }}
                  </div>
                  <div class="unit">RMB</div>
                </div>
              </el-progress>
            </div>
          </div>
        </el-card>
      </div>
    </div>


    <!-- 资源统计 -->
    <div class="resource-stats">
      <!-- 镜像 -->
      <el-card class="resource-card">
        <div class="card-header">
          <i
            class="icon iconfont icon-dingdan"
            style="font-size: 20px; color: #409eff; margin-right: 8px"
          >
          </i>

          <div class="card-title">订单</div>
        </div>
        <div class="stat-grid new">
          <div
            class="stat-item cursor-pointer"
            @click="handleImageManagement('user')"
          >
            <div class="stat-value">{{ indexData.order.order_count_all }}</div>
            <div class="stat-label">总数</div>
          </div>
          <div
            class="stat-item cursor-pointer"
            @click="handleImageManagement('user')"
          >
            <div class="stat-value">
              {{ indexData.order.order_count_pendding }}
            </div>
            <div class="stat-label">待出库</div>
          </div>
          <div
            class="stat-item cursor-pointer"
            @click="handleImageManagement('share')"
          >
            <div class="stat-value">
              {{ indexData.order.order_count_outbound }}
            </div>
            <div class="stat-label">已出库</div>
          </div>
          <div
            class="stat-item cursor-pointer"
            @click="handleImageManagement('preset')"
          >
            <div class="stat-value">
              {{ indexData.order.order_count_transit }}
            </div>
            <div class="stat-label">运输中</div>
          </div>
          <div
            class="stat-item cursor-pointer"
            @click="handleImageManagement('preset')"
          >
            <div class="stat-value">
              {{ indexData.order.order_count_arrived }}
            </div>
            <div class="stat-label">抵达国外仓</div>
          </div>
          <div
            class="stat-item cursor-pointer"
            @click="handleImageManagement('preset')"
          >
            <div class="stat-value">
              {{ indexData.order.order_count_delivered }}
            </div>
            <div class="stat-label">配送中</div>
          </div>
          <div
            class="stat-item cursor-pointer"
            @click="handleImageManagement('preset')"
          >
            <div class="stat-value">
              {{ indexData.order.order_count_signed }}
            </div>
            <div class="stat-label">已签收</div>
          </div>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Refresh, Clock, Check, Close, Monitor } from "@element-plus/icons-vue";
import { statistics } from "./api.js";
import { formatNumber } from "@/utils/common.js";
const loading = ref(false);
const indexData = ref({
  order: {
    order_count_all: 0,
    order_count_pendding: 0,
    order_count_outbound: 0,
    order_count_transit: 0,
    order_count_arrived: 0,
    order_count_delivered: 0,
    order_count_signed: 0,
    count_volume: 0,
    count_weight: 0,
    count_piece: 0,
  },
  pay: {
    pay_count_wait: 0,
    pay_count_appr: 0,
    pay_count_success: 0,
    count_all_income: 0,
    count_today_income: 0,
    count_yesterday_income: 0,
    count_month_income: 0,
    count_last_month_income: 0,
  },
  user: {
    count_all_user: 0,
    count_today_user: 0,
    count_yesterday_user: 0,
    count_month_user: 0,
    count_last_month_user: 0,
  },
});
// 模拟数据获取
const fetchData = async () => {
  loading.value = true;
  let res = await statistics();
  if (res.status === "success") {
    indexData.value = {
      ...indexData.value,
      ...res.data,
    };
  }
  loading.value = false;
};
// 刷新数据
const refreshData = async () => {
  await fetchData();
};

// 页面加载时获取数据
onMounted(async () => {
  await fetchData();
});
</script>

<style lang="scss" scoped>
.overview-container {
  padding: 10px;
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    h2 {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
    }
  }

  .status-and-hours-container {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    height: 320px;
  }

  .status-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 16px;
    flex: 2;
    border-radius: 12px;
    overflow: hidden;
    .status-card {
      height: 100%;
      .card-content {
        display: flex;
        align-items: center;
        padding: 16px;
        text-align: left;

        .card-icon {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          .icon {
            font-size: 24px;
            color: white;
          }
        }

        .card-info {
          flex: 1;
          .card-title {
            font-size: 14px;
            color: var(--el-text-color-secondary);
            margin-bottom: 4px;
          }
          .card-value {
            font-size: 24px;
            font-weight: 600;
            span {
              font-size: 14px;
              color: var(--el-text-color-primary);
              margin-left: 4px;
            }
          }
        }
      }

      &.running {
        .card-icon {
          background-color: var(--el-color-primary-light-7);
        }
        .card-value {
          color: var(--el-color-primary);
        }
      }
      &.waiting {
        .card-icon {
          background-color: var(--el-color-warning-light-7);
        }
        .card-value {
          color: var(--el-color-warning);
        }
      }

      &.success {
        .card-icon {
          background-color: var(--el-color-success-light-7);
        }
        .card-value {
          color: var(--el-color-success);
        }
      }

      &.failed {
        .card-icon {
          background-color: var(--el-color-danger-light-7);
        }
        .card-value {
          color: var(--el-color-danger);
        }
      }
    }
  }

  .remaining-hours {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    .el-card {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid var(--el-border-color);

      .card-title {
        font-size: 16px;
        font-weight: 500;
      }

      .recharge-btn {
        padding: 4px 15px;
      }
    }

    .hours-content {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;

      .circle-container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .progress-inner {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding-bottom: 26px;
      }

      .hours-value {
        font-size: 28px;
        font-weight: 600;
        color: var(--el-color-primary);
      }

      .unit {
        font-size: 18px;
        color: var(--el-text-color-secondary);
      }
    }
  }

  .resource-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;

  
  }
    .resource-card {
      .card-header {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        .header-icon {
          font-size: 18px;
          color: var(--el-color-primary);
          margin-right: 8px;
        }
        .card-title {
          font-size: 16px;
          font-weight: 500;
        }
      }

      .stat-value {
        font-size: 32px;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--el-text-color-primary);
      }

      .stat-label {
        font-size: 14px;
        color: var(--el-text-color-secondary);
        span {
          margin-left: 4px;
          font-size: 12px;
          color: var(--el-text-color-secondary);
        }
      }

      .stat-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        &.new {
          grid-template-columns: repeat(7, 1fr);
        }
        .stat-item {
          text-align: center;
          padding: 8px 0;
          .stat-value {
            font-size: 20px;
          }
          .stat-label {
            font-size: 12px;
          }
        }
      }
    }
}
</style>
